<template>
  <div class="tableinner mediumtablestyle">
    <el-table
      :data="tableData"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      border
      height="100%"
    >
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column prop="interval" label="所属单位" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="name" label="维护班组" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="realTime" :show-overflow-tooltip="true" label="电压等级"></el-table-column>
      <el-table-column prop="Monitoring" :show-overflow-tooltip="true" label="所属变电站"></el-table-column>
      <el-table-column prop="state" :show-overflow-tooltip="true" label="所属一次设备"></el-table-column>
      <el-table-column prop="time" :show-overflow-tooltip="true" width="120" label="装置名称"></el-table-column>
      <el-table-column prop="state" :show-overflow-tooltip="true" label="是否告警"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class extends Vue {
  tableData = [];
  // 表格隔行变色
  tableRowClassName(row, rowIndex) {
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
}
</script>

<style lang="scss" scoped>
.tableinner {
  width: 100%;
  height: 100%;
}
</style>

